<script setup>
import { useRoute } from 'vue-router'
import HeaderBar from './components/HeaderBar.vue'
import Login from "./components/Login.vue";
import Register from "./components/Register.vue";
import RouteList from "./components/RouteList.vue";
import { useRouter } from 'vue-router'
import { ref, computed } from 'vue'
const route = useRoute()
const showLogin = ref(true)
</script>

<template>
<!--  <Login />-->
<!--  <RouteList />-->
<!--  <router-view />-->
<!--  <div>-->

<!--    <Login v-if="showLogin" />-->
<!--    <Register v-else />-->
<!--    <button @click="showLogin = true">登录</button>-->
<!--    <button @click="showLogin = false">注册</button>-->
<!--  </div>-->
  <!-- 只要不是登录页面就显示HeaderBar -->
  <HeaderBar v-if="!['/login', '/register'].includes(route.path)" />
  <router-view />
  <footer class="my-footer">
    <span>作者：雨辰 | 本页面由灵感和代码共同驱动，或许你登录的不是系统，而是人生的下一个节点。</span>
  </footer>
</template>

<style scoped>
  .main-header {
    width: 100vw;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0 2px 10px #e6e9f0;
    padding: 0 32px;
    font-family: '微软雅黑', 'PingFang SC', Arial, sans-serif;
    z-index: 1000;
    position: sticky;
    top: 0;
  }
  .header-left { display: flex; align-items: center; }
  .logo {
    font-weight: bold; font-size: 22px; color: #1e4c7c; cursor: pointer;
    letter-spacing: 2px; margin-right: 18px;
  }
  .header-right { display: flex; align-items: center; }
  .my-footer {
    width: 100vw; min-height: 50px; color: #888;
    text-align: center; font-size: 15px;
    margin-top: 38px; padding: 12px 0 8px 0;
    background: rgba(246,247,251,0.96); border-top: 1px solid #ececec;
  }
  @media (max-width:700px) {
    .main-header { font-size: 15px; padding: 0 10px; }
    .logo { font-size: 15px; }
    .my-footer { font-size: 13px; }
  }
</style>